<template>
	<view>
		<map
		  id="map"
		  :latitude="mapLatitude"
		  :longitude="mapLongitude"
		  :scale="mapScale"
		  :enable-poi="true"
		  :enable-building="true"
		  :show-location="true"
			:markers="editMode?markers:[]"
			:circles="circles"
		  :polygons="fencePolygon"
		  style="width: 100%; height: 800rpx;"
		  @tap="handleMapTap"
		  @markerdrag="handleMarkerDrag">
		</map>
		<input type="number" v-model="fenceRadius" placeholder="输入圆形半径" />
		<button @click="selectMapType(1)">圆形</button>
		<button @click="selectMapType(2)">矩形</button>
		<button @click="selectMapType(3)">矩形</button>
	</view>
</template>

<script>
	import {
		DrawState,
		calculateCoordinates
	} from "@/utils/fence-utils.js"
	export default {
		data() {
			return {
				editMode:false, //是否为编辑模式
				fenceType:1, // 1：圆形 2：矩形 3：多边形
				fenceRadius:500, // 围栏半径（仅圆形）
				fencePolygon:[], // 围栏范围列表(仅矩形和多边形围栏)
				fenceCenter:{}, // 围栏中心
				mapScale:14, //地图初始缩放级别
				mapLatitude:0, //地图初始经度
				mapLongitude:0, //地图初始维度
				markers:[], //标记点
				circles:[], //圆
				currentState: DrawState.Empty,
			}
		},
		onReady() {
			this.getLocal()
		},
		methods: {
			getLocal(){
				uni.getLocation({
					type: 'wgs84',
					success: (res) =>{
						console.log('res----', res)
						this.mapLatitude = res.latitude
						this.mapLongitude = res.longitude
					}
				});
			},
			// 点击获取地图中心位置
			handleMapTap(e){
				this.fenceCenter = {latitude: e.detail.latitude,longitude:e.detail.longitude}
				if(this.fenceType == 1) {
					this.drawCircle()
				} else if(this.fenceType == 2) {
					this.drawRectang()
				} else if(this.fenceType == 3) {
					this.drawPolygon()
				}
			},
			// 切换围栏类型
			selectMapType(type){
				this.fenceType = type
				if(this.fenceType == 1) {
					this.drawCircle()
				} else if(this.fenceType == 2) {
					this.drawRectang()
				} else if(this.fenceType == 3) {
					this.drawPolygon()
				}
			},
			// 绘制圆形
			drawCircle(){
				this.clearMap()
				this.markers.push({
					id: new Date().getTime(),
					latitude: this.fenceCenter.latitude,
					longitude: this.fenceCenter.longitude,
					iconPath:'',
					title:'圆形中心',
				})
				this.circles.push({
					id: new Date().getTime(),
					latitude: this.fenceCenter.latitude,
					longitude: this.fenceCenter.longitude,
					radius: this.fenceRadius,
					strokeWidth:6,
					color: '#409EFF',
					fillColor: '#409EFF80'
				})
			},
			// 绘制矩形
			drawRectang(){
				this.markers.push({
					id: new Date().getTime(),
					latitude: this.fenceCenter.latitude,
					longitude: this.fenceCenter.longitude,
					iconPath:'',
					title:'圆形中心',
					anchor: {
						x: .5,
						y: .5
					},
					callout: {
						fontSize: 15,
						content: "顶点",
						bgColor: "#FFFFFF",
						borderRadius: 5,
						display: "ALWAYS",
						padding: 10,
						textAlign:"center",
					}
				})
				const rectangle = {
					points:[]
				}
				let polygon = {
					id: new Date().getTime(),
					points: rectangle.points,
					strokeWidth: 2,
					strokeColor: "#409EFF",
					fillColor: "#409EFF80",
				}
				this.polygons.push(polygon)
			},
			// 绘制多边形
			drawPolygon(){
				
			},
			// 清空上一个画的内容
			clearMap(){
				if(this.fenceType == 1){
					this.circles = []
				} else if(this.fenceType == 2){
					this.polygons = []
				}
			},
			handleMarkerDrag(e){
				
			}
			
		}
	}
</script>
<style>

</style>
